<template>
  <!-- 进群审核 -->
  <div class="app-container">
    <el-form size="mini" :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
      <el-form-item label="申请人:">
        <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="企业名称:">
        <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.company"></el-input>
      </el-form-item>

      <el-form-item label="状态：">
        <el-select v-model="searchForm.power_sts" placeholder="请选择" style="width: 300px">
          <el-option label="审核中" :value="1"></el-option>
          <el-option label="审核通过" :value="2"></el-option>
          <el-option label="审核驳回" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属小程序：">
        <el-select v-model="searchForm.project_id" placeholder="请选择" style="width: 300px">
          <el-option v-for="(item, index) in project" :key="index" :label="item.key" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="群聊名称:">
        <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.group_name"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="daterange" v-model="searchForm.date" value-format="yyyy-MM-dd"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="getDataList()" icon="el-icon-search" type="primary">查询</el-button>
        <el-button size="mini" @click="refDataList()" icon="el-icon-refresh" type="warning">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px; text-align: right">
      <el-button size="mini" @click="addOrUpdateHandle()" type="primary">通过</el-button>
      <el-button size="mini" @click="handleurn()" type="danger">驳回</el-button>
    </div>
    <!-- 表格开始 -->
    <el-table :data="dataList" size="mini" border style="width: 100%" v-loading="dataListLoading" ref="multipleTable" @selection-change="handleSelectionChange">
      >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" header-align="center" label="编号" prop="typeName" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="申请人" prop="name"> </el-table-column>
      <el-table-column align="center" header-align="center" label="手机号" prop="phone"></el-table-column>
      <el-table-column align="center" header-align="center" label="企业名称" prop="company"></el-table-column>
      <el-table-column align="center" header-align="center" label="企业简介" prop="info">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.info" placement="top" v-show="scope.row.info" popper-class="tool-tip">
            <span style="display: inline-block; max-height: 70px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3">{{ scope.row.info }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="状态" prop="power_sts">
        <template slot-scope="scope">
          <span>{{ scope.row.power_sts == 1 ? '审核中' : scope.row.power_sts == 2 ? '审核通过' : '审核驳回' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="群聊名称" prop="group__name"></el-table-column>
      <el-table-column align="center" header-align="center" label="群聊类型" prop="group__cate__name"></el-table-column>
      <el-table-column align="center" header-align="center" label="所属小程序" prop="group__cate__project__name"></el-table-column>
      <el-table-column align="center" header-align="center" label="申请时间" prop="created_time"></el-table-column>
      <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="addOrUpdateHandle(scope.row)" plain type="primary" v-if="scope.row.power_sts == 1">审核</el-button>
          <el-button size="mini" @click="addOrUpdateHandle1(scope.row)" plain type="info" v-else>查看</el-button>
          <!-- <el-button @click="addOrUpdateHandle(scope.row)" plain size="small" type="primary" >通过</el-button> -->
          <!-- <el-button @click="handleurn(scope.row)" plain size="small" type="danger" >驳回</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      :current-page="pageIndex"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalPage"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 10px; text-align: right"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <popup @refreshList="getDataList" ref="popup"></popup>
    <!-- 删除前通过发送验证码检验身份，此为验证码弹框 -->

    <!--驳回-->
    <el-dialog title="提示" :visible.sync="dialogTableVisible" width="30%">
      <el-form size="mini" :model="form" :rules="rules" ref="form">
        <el-form-item label="驳回结果" label-width="140px">
          <span>审核驳回</span>
        </el-form-item>
        <el-form-item label="驳回理由" label-width="140px" prop="refuse_reason">
          <el-input autocomplete="off" type="textarea" v-model="form.refuse_reason" placeholder="拒绝原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="textMessageReset('form')">取 消</el-button>
        <el-button :loading="false" type="primary" @click="outboundCallSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import popup from './popup'
import { group_power_list, noticebase, group_power } from '@/api/wxapplet/index.js'
export default {
  components: { popup },
  data() {
    return {
      dialogTableVisible: false,
      dialogTabID: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchForm: {
        name: '',
        project_id: '',
        status: '',
        created_user: '',
        date: [],
        power_sts: '',
      },
      form: {
        refuse_reason: '',
      },
      project: [], //所属小程序
      dataListLoading: false,
      dataList: [],

      multipleSelection: [], //选中的数据
      rules: {
        refuse_reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }],
      },
    }
  },
  watch: {
    $route() {
      this.searchForm.power_sts = 1
      this.getDataList()
    },
  },
  mounted() {
    if (this.$route.query.aa) {
      this.searchForm.power_sts = 1
      this.getDataList()
      // this.searchForm.power_sts='审核中'
    } else {
      this.getDataList()
    }
    noticebase({}).then((res) => {
      // 所属小程序
      this.project = res.data.project
    })
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchForm)
      if (info.date.length) {
        info.start_time = info.date[0]
        info.end_time = info.date[1]
        delete info.date
      }

      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }

      group_power_list(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    //重置
    refDataList() {
      this.searchForm = {
        name: '',
        project_id: '',
        status: '',
        created_user: '',
        date: [],
        power_sts: '',
      }
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 批量驳回
    handleurn(row) {
      if (row) {
        if (row.power_sts == 1) {
          this.dialogTabID = row.id
        } else {
          return this.$message.error('请选择状态为未审核的')
        }
      } else {
        var Array = []
        for (let key in this.multipleSelection) {
          if (this.multipleSelection[key].power_sts == 1) {
            Array.push(this.multipleSelection[key].id)
          }
        }
        this.dialogTabID = Array
      }

      if (this.dialogTabID.length > 0) {
        this.dialogTableVisible = true
      } else {
        return this.$message.error('请至少选择一个状态为未审核的')
      }
    },

    // 更新值
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 通过、批量通过
    addOrUpdateHandle(row) {
      if (row) {
        if (row.power_sts == 1) {
          row.btn = 1
          this.$refs.popup.open(row)
          return
        } else {
          return this.$message.error('请选择状态为未审核的')
        }
      } else {
        // 批量通过
        var info = { ids: [] }
        for (let key in this.multipleSelection) {
          if (this.multipleSelection[key].power_sts == 1) {
            info.ids.push(this.multipleSelection[key].id)
          }
        }
        info.sts = 2
      }

      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      if (info.ids.length <= 0) {
        return this.$message.error('请至少选择一个状态为未审核的')
      }

      this.$confirm('是否通过')
        .then((_) => {
          group_power(formData)
            .then((res) => {
              this.$message.success('删除成功')
              this.getDataList()
              this.$store.dispatch('tagsView/aaa')
            })
            .catch((e) => {
              this.$message.error('删除失败')
            })
        })
        .catch((_) => {})
    },
    // 查看
    addOrUpdateHandle1(row) {
      row.btn = 0
      this.$refs.popup.open(row)
    },

    //取消
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.dialogTableVisible = false
    },
    // 确定
    outboundCallSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.form)
          info.ids = this.dialogTabID
          info.sts = 3
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          group_power(formData)
            .then((res) => {
              this.textMessageReset('form')
              this.$message.success('驳回成功')
              this.getDataList()
              this.$store.dispatch('tagsView/aaa')
            })
            .catch((e) => {
              this.$message.error('驳回失败')
            })
        }
      })
    },
  },
}
</script>
<style lang="scss">
.tool-tip {
  max-width: 300px;
}
</style>
